<template>
    <div class="yb-retrieve">
        <yb-header></yb-header>
        <div class="yb-info">
            <div class="title">找回密码</div>
            <!-- 步骤 -->
            <div class="yb-step">
                <div :class="selectStyle.user">输入登录账号
                    <div :class="stStyle.user"></div>
                </div>
                <div :class="selectStyle.verify">验证企业信息
                    <div :class="stStyle.verify"></div>
                </div>
                <div :class="selectStyle.reast">重新设置密码</div>
            </div>
            <div class="yb-step-to">
                <div class="yb-step-user" :class="stepStyle.user">
                    <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="登录手机号" prop="mobile">
                            <el-input type="text" v-model="userForm.mobile" auto-complete="off" :disabled="disable"></el-input>
                        </el-form-item>
                        <el-form-item label="短信验证码" prop="verifyCode" class="codeLabel">
                            <el-input type="text" v-model="userForm.verifyCode" auto-complete="off"></el-input>
                            <el-button type="primary" class="yb-send" :disabled="disabled" @click="getVeify">{{value}}</el-button>
                            <div v-show="msg" style="font-size:12pxfont-size: 12px;color: #8d8d8d;width: 150%;position: absolute;top: 0;left:340px;"><i class="el-icon-circle-check" style="color:#44b549"></i> 验证码已发送到你的手机{{maskMobile}}，5分钟内输入有效</div>
                        </el-form-item>
                        <el-form-item class="yb-ssb">
                            <el-button class="yb-sub" type="primary" @click="two()">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="yb-step-user" :class="stepStyle.verify">
                    <el-form :model="verifyForm" :rules="rules" ref="verifyForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="联系人姓名" prop="userName">
                            <el-input type="text" v-model="verifyForm.userName" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item class="yb-ssb">
                            <el-button class="yb-sub" type="primary" @click="three()">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="yb-step-user" :class="stepStyle.reast">
                    <el-form :model="reastForm" :rules="rules" ref="resetForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="请输入新密码" prop="name">
                            <el-input type="password" v-model="reastForm.password" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item class="yb-ssb">
                            <el-button class="yb-sub" type="primary" @click="four()">完成</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>

<script>
    import header from '../packages/header.vue'
    import footer from '../packages/footer.vue'
    import md5 from 'js-md5'
    export default {
        name: 'retrieve',
        components: {
            'yb-header': header,
            'yb-footer': footer
        },
        data: function () {
            let validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入手机号'))
                } else {
                    callback()
                }
            }
            let validateCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'))
                } else {
                    callback()
                }
            }
            return {
                maskMobile: "",
                stStyle: {
                    user: {
                        'step-bg': false,
                        'step-bg-s': true,
                        'step-c': false
                    },
                    verify: {
                        'step-bg': true,
                        'step-bg-s': false,
                        'step-c': false
                    }
                },
                selectStyle: {
                    user: {
                        'selected': true
                    },
                    verify: {
                        'selected': false
                    },
                    reast: {
                        'selected': false
                    }
                },
                stepStyle: {
                    user: {
                        'none': false
                    },
                    verify: {
                        'none': true
                    },
                    reast: {
                        'none': true
                    }
                },
                num: 0,
                disabled: false,
                msg: false,
                disable: false,
                value: '获得验证码',
                userForm: {
                    mobile: '',
                    verifyCode: '',
                    verifySessionId: ''
                },
                verifyForm: {
                    userName: '',
                    type: '1'
                },
                reastForm: {
                    password: ''
                },
                rules: {
                    mobile: [{
                        validator: validateName,
                        trigger: 'blur'
                    }],
                    verifyCode: [{
                        validator: validateCode,
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            checVerifyCode: function () {
                if (!this.userForm.verifySessionId) {
                    this.$message({
                        showClose: true,
                        message: '请先获得验证码',
                        duration: 5000,
                        type: 'error'
                    })
                    return
                }
            },
            getVeify: function () {
                this.$ajax(
                    'resetPwdOne',
                    {mobile: this.userForm.mobile}
                    , () => {
                    },
                    (content) => {
                        this.userForm.verifySessionId = content.verifySessionId
                        this.maskMobile = content.mobile
                        this.msg = true
                        // 计时
                        if (this.time) {
                            clearInterval(this.time)
                            this.disabled = false
                        }
                        let time = 60
                        this.disabled = true
                        // 保留sesionId
                        this.verifySessionId = content.verifySessionId
                        this.value = '重新获取(' + time + ')'
                        this.time = setInterval(() => {
                            if (time === 0) {
                                this.value = '重新获取'
                                this.disabled = false
                                clearInterval(this.time)
                                return
                            }
                            time--
                            this.value = '重新获取(' + time + ')'
                        }, 1000)
                    }, false)
            },
            two: function () {
                //需要发送验证码
                this.checVerifyCode()

                //参数验证
                this.$refs['userForm'].validate((valid) => {
                    if(valid)
                    {
                        this.$ajax(
                            'resetPwdTwo',
                            {
                                verifyCode: this.userForm.verifyCode,
                                verifySessionId: this.userForm.verifySessionId
                            }
                            , () => {
                            },
                            (content) => {
                                this.disable = true
                                this.stepStyle.user['none'] = true
                                this.stepStyle.verify['none'] = false
                                this.stepStyle.reast['none'] = true
                                this.selectStyle.user['selected'] = false
                                this.selectStyle.verify['selected'] = true
                                this.selectStyle.reast['selected'] = false
                                this.stStyle.user['step-bg-s'] = false
                                this.stStyle.user['step-c'] = true
                                this.stStyle.verify['step-bg'] = false
                                this.stStyle.verify['step-bg-s'] = true
                                this.num = 1
                            }, false)
                    }
                })
            },
            three: function () {
                //需要发送验证码
                this.checVerifyCode()

                //参数验证
                this.$refs['verifyForm'].validate((valid) => {
                    if(valid)
                    {
                        this.$ajax(
                            'resetPwdThree',
                            {
                                contactName: this.verifyForm.userName,
                                verifySessionId: this.userForm.verifySessionId
                            }
                            , () => {
                            },
                            (content) => {
                                this.stepStyle.user['none'] = true
                                this.stepStyle.verify['none'] = true
                                this.stepStyle.reast['none'] = false
                                this.selectStyle.user['selected'] = false
                                this.selectStyle.verify['selected'] = false
                                this.selectStyle.reast['selected'] = true
                                this.stStyle.user['step-bg-s'] = false
                                this.stStyle.user['step-bg'] = true
                                this.stStyle.user['step-c'] = false
                                this.stStyle.verify['step-bg'] = false
                                this.stStyle.verify['step-bg-s'] = false
                                this.stStyle.verify['step-c'] = true
                                this.num = 2
                            }, false)
                    }
                })
            },
            four: function () {
                //需要发送验证码
                this.checVerifyCode()

                let reg = /^[\da-zA-Z~`!@#\$%\^&\*\(\)-_=\+\[\]\{\}\\\|;:'"<>,\.\?\/]{6,20}$/;
                if(!reg.test(this.reastForm.password))
                {
                    this.$message({
                        message: "请设置6到20位的安全密码",
                        type: 'error'
                    })
                    return
                }

                //参数验证
                this.$refs['resetForm'].validate((valid) => {
                    if(valid)
                    {
                        this.$ajax(
                            'resetPwdFour',
                            {
                                'newPassword': md5(this.reastForm.password),
                                'verifySessionId': this.userForm.verifySessionId
                            }
                            , () => {
                            },
                            (content) => {
                                this.$router.push('/')
                            }, true)
                    }
                })
            }
        }
    }

</script>

<style lang="less">
    @import "../less/variables";
    .yb-retrieve {
        font-size: 14px;
        .el-input,
        .el-input__inner {
            width: 100% !important;
        }
        .codeLabel {
            width: 300px;
            position: relative;
        }
        .yb-info {
            width: @layout-width;
            background: #ffffff;
            margin: 0 auto;
            height: 520px;
            margin-top: 35px;
            .title {
                padding-left: 50px;
                background: #f4f5f9;
                line-height: 50px;
            }
            .label {
                line-height: 40px;
                background: #ffffff;
                color: #8b8b8b;
            }
        }
        .yb-step {
            display: flex;
            border-bottom: 1px solid #ccc;
            div {
                flex: 1;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
        }
        .demo-ruleForm {
            width: 85%;
            button:disabled {
                background-color: #aaabab !important;
                border-color: #aaabab !important;
                color: white;
            }
        }
        .selected {
            background: #44b549;
            color: white;
        }
        .step-bg-s {
            background: url("../assets/arrow-bg.jpg") no-repeat;
            background-size: 100% 100%;
            width: 20px;
            height: 100%;
            float: right;
        }
        .step-bg {
            background: url("../assets/arrow.jpg") no-repeat;
            background-size: 100% 100%;
            width: 20px;
            height: 100%;
            float: right;
        }
        .yb-send {
            position: absolute;
            right: -125px;
            width: 115px;
            top: 0;
        }
        .step-c {
            background: url("../assets/arrow-c.jpg") no-repeat;
            background-size: 100% 100%;
            width: 20px;
            height: 100%;
            float: right;
        }
        .yb-step-user {
            width: 500px;
            margin: 0 auto;
            padding: 10px;
            margin-top: 50px;
        }
        .yb-ssb {
            width: 10px;
            margin: 0 auto;
            .el-form-item__content {
                margin: 0 auto !important;
            }
        }
        .yb-sub {
            background: #44b549;
            border: none;
        }
        .none {
            display: none;
        }
    }

</style>
